<template>
  <view v-if="list.length" class="clue-step">
    <uv-steps current="0" direction="column">
      <uv-steps-item v-for="(item, index) in list" :key="index">
        <template #icon>
          <slot name="icon">
            <image class="w-32rpx h-32rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-step.svg"></image>
          </slot>
        </template>
        <template #title>
          <slot name="title" :row="item" :index="index"></slot>
        </template>
        <template #desc>
          <slot name="desc" :row="item" :index="index"></slot>
        </template>
      </uv-steps-item>
    </uv-steps>
  </view>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
});

const list = computed(() => {
  return props.data;
});
</script>

<style lang="scss" scoped>
.clue-step {
  :deep(.uv-steps-item__line) {
    border-right: 1px dashed #e6e6e6;
    background-color: transparent !important;
  }
}
</style>
